<template>
  <!--总容器-->
  <div class="wrapper">
    <!--header部分-->
    <header style="display: flex;align-items: center;">
<!--      <div class="icon-location-box">-->
<!--        <div class="icon-location"></div>-->
      <img src="../assets/icons/home/dingwei.png" style="">
<!--      </div>-->
      <div class="location">
        <text>沈阳市规划大厦</text>
        <img src="../assets/icons/home/tri-down.png">
<!--        <i class ="fa fa-caret-down"></i>-->
      </div>

    </header>
    <!--        搜索框部分-->
    <div class="search">
      <!-- 占位元素，高度等于搜索框的高度 -->
      <div class="search-placeholder" :style="{ height: isSearchFixed ? '13vw' : '0' }"></div>
      <div class="search-fixed-top" ref="fixedBox">
        <div class="search-box" >
<!--          <i class="fa fa-search"></i>-->

          <img src="../assets/icons/home/sousuo.png">
          搜索饿了么商家、商品名称
        </div>
      </div>

    </div>
    <!--        点餐分类部分-->
    <ul class="foodtype">
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl01.png">
        <p>美食</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl02.png">
        <p>早餐</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl03.png">
        <p>跑腿代购</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl04.png">
        <p>汉堡披萨</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl05.png">
        <p>甜品饮品</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl06.png">
        <p>速食简餐</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl07.png">
        <p>地方小吃</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl08.png">
        <p>米粉面馆</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl09.png">
        <p>包子粥铺</p>
      </li>
      <li onclick="location.href='businessList.html'">
        <img src="/src/assets/img/dcfl10.png">
        <p>炸鸡炸串</p>
      </li>


    </ul>
    <!--        横幅广告部分-->
    <div class="banner">
      <h3>品质套餐</h3>
      <p>搭配齐全吃得好</p>
      <a href="">立即抢购 &gt;</a>
    </div>
    <!--    超级会员部分-->
    <div class="supermember">
      <div class="left">
        <img src="/src/assets/img/super_member.png">
        <h3>超级会员</h3>
        <p> &#8226; 每月享超值权益</p>
      </div>
      <div class="right">
        立即开通 &gt;
      </div>
    </div>
    <!--        推荐商家部分-->
    <div class="recommand">
      <div class="recommand-line"></div>
      <p>推荐商家</p>
      <div class="recommand-line"></div>
    </div>
    <!--        推荐方式部分-->
    <ul class="recommandtype">
      <li>综合排序 <i class="fa fa-caret-down"></i></li>
      <li>距离最近</li>
      <li>销量最高</li>
      <li>筛选 <i class="fa fa-filter"></i></li>
    </ul>
    <!--推荐商家列表部分-->
    <ul class="business"   style=" padding-bottom: 14vw;">

      <BusinessItem v-for="(item,i) in businessList"  :key="i"
                    :item="item" style="padding-bottom: 0px ;"

      />


    </ul>


  <Footer />

  </div>
</template>

<script>
// import "/src/assets/css/index.css"
import "/src/assets/css/reset.css"

import BusinessItem from "./item/BusinessItem.vue";
import axios from "axios";
import {ref} from "vue";
import Footer from "./item/Footer.vue";
import {useRouter} from "vue-router";
export default {
  components: {Footer, BusinessItem},
  setup(){


    let businessList=ref([])
    let isSearchFixed = ref(false);
    let fixedBox=ref(null);

    const scrollHandler= function (){
      //获取滚动条位置
      let s1 = document.documentElement.scrollTop;
      let s2 = document.body.scrollTop;
      let scroll = s1 == 0 ? s2 : s1;
      //获取视口宽度
      let width = document.documentElement.clientWidth;

      //获取顶部固定块
      let search = fixedBox.value;

      //判断滚动条超过视口宽度的12%时，搜索块变固定定位
      if (scroll > width * 0.12) {
        search.style.position = 'fixed';
        search.style.left = '0';
        search.style.top = '0';

        isSearchFixed.value = true; // 标记搜索栏已固定
      } else {
        search.style.position = 'static';
        isSearchFixed.value= false; // 标记搜索栏未固定
      }
    }

    function  loadBusiness() {
       axios.get("/business/getAll").then(function (response){
        // console.log(response)
        businessList.value=response.data
         // console.log(businessList.value)
      }).catch(function (error){
        console.log(error)
      })

    }


    return{
      fixedBox,
      businessList,
      isSearchFixed,
      loadBusiness,

      scrollHandler
    }

  },

  mounted (){
    this.fixedBox=this.$refs.fixedBox

    // console.log(this.fixedBox.style)
    this.loadBusiness()

    document.addEventListener("scroll", this.scrollHandler);
  },
  beforeUnmount() {
    document.removeEventListener("scroll", this.scrollHandler);
  }

}





</script>

<style scoped>
.wrapper{
  width:100%;
  height: 100%;

}

/*头部*/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;

  display: flex;
  align-items: center;
}
.wrapper header img{
  height: 20px;width: 20px;margin-left: 10px
}
/*.wrapper header .icon-location-box{*/
/*  width: 3.5vw;*/
/*  height: 3.5vw;*/
/*  margin: 0 1vw 0 3vw;*/
/*}*/
.wrapper header .location{
  font-size: 4.5vw;
  font-weight: 700;
  color: white;
  margin-left: 5px;
  display: flex;
  align-items: center;
}

.wrapper header .location img{
  width: 15px;
  height: 15px;

}


/*search*/
.wrapper search{
  width: 100%;
  height: 13vw;
}
.wrapper .search-fixed-top{
  width: 100%;
  height: 13vw;
  background-color: #0097FF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .search-fixed-top .search-box{
  width:90%;
  height: 9vw;
  background-color: white;
  border-radius: 2px;

  display: flex;
  justify-content: center;
  align-items: center;
  font-size:3.5vw;
  color: #AEAEAE;
  font-family: "宋体";
  /*此样式是让文本选中状态无效*/
  user-select: none ;
}
/*.wrapper .search .search-fixed-top .search-box .fa-search{*/
/*  margin-right: 1vw;*/
/*}*/
.wrapper .search .search-fixed-top .search-box img{
  height: 17px;width: 17px; margin-right: 2px
}
/* 点餐分类部分*/
.wrapper .foodtype{
  width: 100%;
  height: 48vw;



  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  align-content: center;
}
.wrapper .foodtype li{
  width: 18vw;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-items: center;
  user-select: none;
  cursor: pointer;


}
.wrapper .foodtype li img{
  width: 12vw;
  height: 12vw;
}
.wrapper .foodtype li p{
  font-size: 3.2vw;
  color: #666;
}
/*横幅广告部分*/
.wrapper .banner{
  width: 95%;
  margin: 0 auto;
  height: 29vw;

  background-image:url('/src/assets/img/index_banner.png') ;
  background-repeat: no-repeat;
  background-size: cover;

  box-sizing: border-box;
  padding: 2vw 6vw;
}
.wrapper .banner h3{
  font-size: 4.2vw;
  margin-bottom: 1.2vw;

}
.wrapper .banner p{
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 2.4vw;
}
.wrapper .banner a{
  font-size: 3vw;
  color: #C79060;
  font-weight: 700;
}
/*超级会员部分*/
.wrapper .supermember{
  width: 95%;
  margin:0 auto;
  margin-top: 1.3vw;
  border-radius: 2px;
  height: 11.5vw;
  background-color: #FEEDC1;
  color: #644F1B;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .supermember .left{
  display: flex;
  align-items: center;
  margin-left: 4vw;
  user-select: none;

}
.wrapper .supermember .left img{
  width: 6vw;
  height: 6vw;
  margin-right: 2vw;
}
.wrapper .supermember .left h3{
  font-size: 4vw;
  margin-right: 2vw;
}
.wrapper .supermember .left p{
  font-size: 3vw;
}
.wrapper .supermember .right{
  font-size: 3vw;
  margin-right: 4vw;
  cursor: pointer;
}
/*推荐商家部分*/
.wrapper .recommand{
  width: 100%;
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .recommand .recommand-line{
  width:6vw;
  height: 0.2vw;
  background-color: #888;

}
.wrapper .recommand p{
  font-size: 4vw;
  margin: 0 4vw;
}
/*推荐方式部分*/
.wrapper .recommandtype{
  width: 100%;
  height: 5vw;
  margin-bottom: 5vw;

  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .recommandtype li{
  font-size: 3.5vw;
  color: #555;

}
</style>

